/** @type {import('tailwindcss').Config} */
module.exports = {
  // 手动切换暗模式
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{vue,js}'], // 需要将tailwindcss引入到的文件
  theme: {
    extend: {
      fontSize: {
        xs: ['0.25rem', '0.35rem'],
        sm: ['0.35rem', '0.45rem'],
        base: ['0.42rem', '0.52rem'],
        lg: ['0.55rem', '0.65rem'],
        xl: ['0.65rem', '0.75rem']
      },
      boxShadow: {
        'l-white': '-10px 0 10px white',
        'l-zinc': '-10px 0 10px #18181b'
      },
      height: {
        header: '72px',
        main: 'calc(100vh - 72px)'
      },
      colors: {
        main: '#F44C58',
        'hover-main': '#F32836',
        'info-100': '#909399',
        'info-200': '#EBEEF5',
        'info-300': '#EDF2FC',
        'success-100': '#67C23A',
        'success-200': '#E1F3D8',
        'success-300': '#F0F9EB',
        'warn-100': '#E6A23C',
        'warn-200': '#FAECD8',
        'warn-300': '#FDF6EC',
        'error-100': '#F56C6C',
        'error-200': '#FDE2E2',
        'error-300': '#FEF0F0'
      },
      variants: {
        scrollbar: ['dark']
      },
      backdropBlur: {
        '4xl': '240px'
      }
    }
  },
  // 引入 tailwind 修改 scrollbar 的样式插件
  plugins: [require('tailwind-scrollbar')]
}
